<template>
  <div id="answerSheet">
    <div class="title">
      <span>答题卡</span>
      <span class="time">剩余时间：{{ time }} 分钟</span>
    </div>

    <div class="card">
      <ul class="questions">
        <li v-for="(id, index) in questionIds" :key="id">
          <el-button
  size="small"
  :type="getButtonType(index)"
  :class="{ 'marked-border': marked.includes(index) }"
  @click="goToQuestion(index)"
>
  {{ index + 1 }}
</el-button>

        </li>
      </ul>
    </div>

    <div class="submit">
      <el-button type="danger" @click="confirmSubmit">提交试卷</el-button>
    </div>

    <el-dialog
      title="确认提交"
      v-model="dialogVisible"
      width="30%"
      center
    >
      <span>确定要提交试卷吗？提交后将显示试题解析。</span>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确认提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questionIds: [],
      answers: [],
      marked: [],
      time: 60,
      dialogVisible: false,
      submittedAnswers: [],
      examId: null,
      paperId:null,
    };
  },
  created() {
    const query = this.$route.query;
    this.examId = query.examId || this.$cookies.get('examId') || null;
    this.paperId = this.$cookies.get('paperId') || null;
    this.questionIds = query.questionIds?.split(',') || [];
    this.answers = JSON.parse(query.answers || '[]');
    this.marked = JSON.parse(query.marked || '[]');
    this.time = parseInt(query.time) || 60;
  },
  methods: {
    goToQuestion(index) {
      this.$router.push({
        path: '/answer',
        query: {
          fromSheet: true,
          questionIndex: index,
          questionIds: this.questionIds.join(','),
          examId: this.examId,
          paperId:this.paperId,
        }
      });
    },
    confirmSubmit() {
      this.dialogVisible = true;
    },
    submit() {
  const studentId = this.$cookies.get('cid');
  const cookieAnswers = this.$cookies.get('answers') || [];
  const questionIdList = this.$cookies.get('questionIds') || [];

  if (!studentId || !Array.isArray(cookieAnswers) || !Array.isArray(questionIdList)) {
    this.$message.error('数据异常，请重新进入考试页面');
    return;
  }

  const optionMap = {
    option1: 'A',
    option2: 'B',
    option3: 'C',
    option4: 'D'
  };

  const answers = questionIdList.map((id, index) => ({
    questionId: parseInt(id),
    answer: optionMap[cookieAnswers[index]] || ''
  }));

  const payload = {
    studentId: parseInt(studentId),
    paperId: parseInt(this.paperId),
    answers
  };

  console.log('✅ 提交数据:', payload);

  this.$axios.post('/api/answer/adds', payload).then(res => {
    if (res.data.code === 200) {
      this.$message.success('提交成功，正在进入解析页面');
      this.dialogVisible = false;

      this.$cookies.remove('answers');
      this.$router.push({
        path: '/student/exam', // 你的解析页面路径
       
      });
    } else {
      this.$message.error(res.data.msg || '提交失败');
    }
  }).catch(err => {
    console.error(err);
    this.$message.error('提交出错，请检查网络');
  });
},
getButtonType(index) {
  const answered = this.answers[index]?.answer || this.answers[index]; // 支持两种格式
  const isMarked = this.marked.includes(index);

  if (answered) return 'primary'; // 已作答
  if (isMarked) return 'warning'; // 未作答但标记
  return 'default'; // 未作答未标记
},

  }
};
</script>

<style scoped>
.marked-border {
  border: 4px solid #e6a23c !important; /* 黄色警告色 */
  box-sizing: border-box;
  border-radius: 4px;
}
#answerSheet {
  padding: 20px;
}
.title {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  margin-bottom: 20px;
}
.card {
  margin: 20px 0;
}
.questions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.submit {
  text-align: center;
  margin-top: 30px;
}
</style>
